<template>
  <div class="editor-container">
    <!-- 上传按钮 -->
    <el-button 
      type="primary"
      @click="$refs.fileInput.click()"
    >
      选择图片
      <input
        ref="fileInput"
        type="file"
        accept="image/*"
        hidden
        @change="handleFileChange"
      >
    </el-button>

    <!-- 修改后的裁剪弹窗 -->
    <el-dialog
      :visible.sync="cropperVisible"
      :title="'裁剪图片'"
      :width="isMobile ? '100%' : '70%'"
      :fullscreen="isMobile"
      :top="isMobile ? '0' : '5vh'"
      @opened="initCropper"
      @closed="resetCropper"
    >
      <div class="cropper-wrapper">
        <vue-cropper
          ref="cropper"
          :img="cropperImageSrc"
          :auto-crop="true"
          :aspect-ratio="1"
          :view-mode="1"
          :guides="true"
          :background="false"
          drag-mode="move"
          :responsive="true"
          :auto-crop-area="0.8"
          :check-cross-origin="false"
          :rotatable="true"
        ></vue-cropper>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button-group>
          <el-button @click="rotate(-90)" icon="el-icon-refresh-left">左转</el-button>
          <el-button @click="rotate(90)" icon="el-icon-refresh-right">右转</el-button>
          <el-button @click="zoom(0.1)" icon="el-icon-zoom-in">放大</el-button>
          <el-button @click="zoom(-0.1)" icon="el-icon-zoom-out">缩小</el-button>
        </el-button-group>
        <el-button 
          type="primary" 
          @click="cropAndUpload"
          :loading="isCropping"
        >
          {{ isCropping ? '处理中...' : '确定裁剪' }}
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import VueCropper from 'vue-cropper'

export default {
  components: { VueCropper },
  data() {
    return {
      dialogVisible: false,
      cropperImage: '',
      // 新增状态
      isCropping: false,
      originalImage: null
    }
  },
  methods: {
    // 文件选择处理
    handleFileChange(e) {
      const file = e.target.files[0]
      if (!file) return

      if (!file.type.startsWith('image/')) {
        this.$message.error('请选择图片文件')
        return
      }

      const reader = new FileReader()
      reader.onload = (e) => {
        this.cropperImage = e.target.result
        this.dialogVisible = true
      }
      reader.readAsDataURL(file)
    },

    // 初始化裁剪器
    initCropper() {
      this.$nextTick(() => {
        this.$refs.cropper && this.$refs.cropper.initCrop()
      })
    },

    // 旋转操作
    rotate(deg) {
      this.$refs.cropper.rotate(deg)
    },

    // 缩放操作
    zoom(percent) {
      this.$refs.cropper.changeScale(percent)
    },

    // 执行裁剪
    cropImage() {
      this.$refs.cropper.getCropData(data => {
        // 这里可以处理裁剪后的base64数据
        console.log('Cropped Data:', data)
        this.dialogVisible = false
        this.$message.success('裁剪完成')
      })
    }
  }
}
</script>

<style scoped>
.editor-container {
  padding: 20px;
}

.cropper-wrapper {
  width: 100%;
  height: 60vh;
  min-height: 400px;
}

/* 强制覆盖cropper样式 */
::v-deep .vue-cropper {
  background: #f0f2f5;
  border-radius: 4px;
  box-shadow: 0 2px 12px rgba(0,0,0,.1);
}

::v-deep .cropper-view-box {
  outline: 2px solid #409eff;
  border-radius: 50%;
}
</style>